import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'
import { motion } from 'framer-motion'
import { RomanticEffects, SakuraEffect } from '../components/RomanticEffects'
import { MusicPlayer } from '../components/MusicPlayer'
import { AnimatedNavbar } from '../components/AnimatedNavbar'

export const Route = createRootRoute({
  component: () => (
    <div className="relative min-h-screen">
      <RomanticEffects />
      <SakuraEffect />
      <MusicPlayer />
      <AnimatedNavbar />
      <motion.main
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{ duration: 0.5, ease: "easeOut" }}
        className="pt-16"
      >
        <Outlet />
      </motion.main>
      <TanStackRouterDevtools />
    </div>
  ),
})
